<template>
  <div class="system-iotDeviceGroup-add">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
			<template #header>
				<h4>已认证企业详情</h4>
			</template>
      <el-form ref="formRef" :model="formData" label-width="150px">
				<el-row>
          <el-col :span="8">
            <el-form-item label="企业名称：">{{ formData.companyName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="社会统一信用代码：">{{ formData.creditCode }}</el-form-item>
          </el-col>
           <el-col :span="8">
            <el-form-item label="月租价格：">{{ formData.monthPrice }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人姓名：">{{ formData.legalName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人身份证号：">{{ formData.legalIdCard }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分钟数价格：">{{ formData.minutePrice }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经办人姓名：">{{ formData.handName }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经办人身份证号：">{{ formData.handIdCard }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经办人联系方式：">{{ formData.handPhone }}</el-form-item>
          </el-col>
		   <el-col :span="24">
            <el-form-item label="备注信息：">{{ formData.remark }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="centerV mb30">
              <el-image style="width: 240px; height: 150px" :src="formData.idCardFront" fit="cover" lazy  @click="handleClick(formData.idCardFront)" />
              <div class="mt5 fs20">法人身份证正面照 {{!formData.idCardFront?'未上传':'' }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="centerV mb30" >
              <el-image style="width: 240px; height: 150px" :src="formData.idCardBack" fit="cover" lazy @click="handleClick(formData.idCardBack)" />
              <div class="mt5 fs20">法人身份证反面照 {{!formData.idCardBack?'未上传':'' }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="centerV mb30" >
              <el-image style="width: 240px; height: 150px" :src="formData.handIdCardFront" lazy @click="handleClick(formData.handIdCardFront)"
                fit="cover" />
              <div class="mt5 fs20">经办人身份证正面照 {{!formData.handIdCardFront?'未上传':'' }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div  class="centerV mb30">
              <el-image style="width: 240px; height: 150px" :src="formData.handIdCardBack" lazy  @click="handleClick(formData.handIdCardBack)"
                fit="cover" />
              <div class="mt5 fs20">经办人身份证反面照 {{!formData.handIdCardBack?'未上传':'' }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="centerV mb30" >
              <el-image style="width: 240px; height: 150px" :src="formData.handMandateFile" lazy @click="handleClick(formData.handMandateFile)"
                fit="cover" />
              <div class="mt5 fs20">经办人授权委托书 {{!formData.handMandateFile?'未上传':'' }}</div>
            </div>
          </el-col>
          <el-col :span="6" v-if="formData.licenseFiles.length == 1" @click="handleClick(formData.licenseFiles)">
            <div class="centerV mb30">
              <el-image style="width: 240px; height: 150px" :src="formData.licenseFiles[0]" lazy show-progress
                fit="cover" />
              <div class="mt5 fs20">金融许可文件</div>
            </div>
          </el-col>
          <el-col :span="18" v-else-if="formData.licenseFiles.length > 1">
            <div class="mb30 centerV">
              <div class="wrap ">
                <el-image class="ml30" v-for="(item, index) in formData.licenseFiles" :src="item" lazy :key="item"
                  @click="handleClick(formData.licenseFiles, index)" style="width: 240px; height: 150px" fit="cover" />
              </div>
              <div class="mt5 fs20">金融许可文件</div>
            </div>
          </el-col>
          <el-col :span="6" v-else>
            <div class="centerV" style=" height: 150px">
              <div class="mt5 fs20" >金融许可文件未上传</div>
            </div>
          </el-col>
		  </el-row>
      </el-form>
    </el-drawer>
    <el-image-viewer v-if="showPreview" :url-list="srcList" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" lazy
      :preview-src-list="srcList" show-progress :initial-index="initialIndex"   @close="showPreview = false"  hide-on-click-modal />
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { getCompanyInfoApi } from '@/api/auditTask/enterpriseAuthentication';
export default defineComponent({
  name: 'enterpriseAuthenticationEdit', //企业实名审核
  components: {},
  props: {
    configUserTypeData: {
      type: Array,
      default: () => []
    },
  },
  setup(props, { emit }) {
    const formRef = ref<HTMLElement | null>(null);
    const menuRef = ref();
    const state = reactive({
      loading: false,
      isShowDialog: false,
      showPreview: false,
      srcList: [],  //预览图片
      initialIndex: null,  //初始图片索引
      formData: {
        companyCode: '',
        companyName: '',
        legalName: '',
        creditCode: '',
        legalIdCard: '',
        handName: '',
        handIdCard: '',
        handPhone: '',
        idCardFront: '',
        idCardBack: '',
        handIdCardFront: '',
        handIdCardBack: '',
        handMandateFile: '',
        licenseFiles: [],
        monthPrice: null,
        minutePrice: null,
        remark: '',
      },
      // 表单校验
      rules: {
        // monthPrice: [{ required: true, message: '请输入月租价格', trigger: 'blur' }],
        // minutePrice: [{ required: true, message: '请输入分钟数价格', trigger: 'blur' }],
      },
    });
    // 打开弹窗
    const openDialog = (id) => {
      resetForm();
      getCompanyInfoApi({ id }).then((res: any) => {
        if (res?.data) {
          state.formData = res.data
        }
        state.isShowDialog = true;
      })

    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    
    // 打开预览
    const handleClick = (item, index = 0) => {
      console.log(item,index);
      state.srcList = []
      
      if (!item) return
      // 如果val是数组，检查是否至少有一个权限存在
      if (Array.isArray(item)) {
        state.srcList = item
      }
      // 如果val是字符串，检查单个权限
      if (typeof item === 'string') {
        state.srcList = [item]
      }
      console.log( state.srcList);
      
      state.initialIndex = index
      state.showPreview = true
    }
    const resetForm = () => {
      state.formData = {
        companyCode: '',
        companyName: '',
        legalName: '',
        creditCode: '',
        legalIdCard: '',
        handName: '',
        handIdCard: '',
        handPhone: '',
        idCardFront: '',
        idCardBack: '',
        handIdCardFront: '',
        handIdCardBack: '',
        handMandateFile: '',
        licenseFiles: [],
        monthPrice: null,
        minutePrice: null,
        remark: '',
      };
    };
    return {
      menuRef,
      formRef,
      openDialog,
      handleClick,
      closeDialog,
      onCancel,
      resetForm,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped></style>
